<script setup>
import { ref,reactive,onBeforeMount,unref,getCurrentInstance } from 'vue'
import useRolesStore from '../../store/rolesStore'
import useMenusStore from '../../store/menusStore'
import { ElMessageBox } from 'element-plus'

const rolesStore = useRolesStore()
const menusStore = useMenusStore()

const ctx = getCurrentInstance()

onBeforeMount(() => {
  // 获取菜单数据
  menusStore.getMenusAction()
})

const editId = ref('') // 编辑角色id
const menuTree = reactive({
  arr: []
}) // 默认勾选的菜单选项
const roleForm = reactive({
  rolename: "", // 角色名称
  menus: "", // 访问菜单
  status: 1, // 1启用 2禁用
})
const rules = reactive({
  rolename: { required: true, message: "请输入角色名称", trigger: "blur" },
  // menus: { required: true, message: "请输入角色名称", trigger: "blur" },
  status: { required: true, message: "请选择角色状态", trigger: "blur" }
})
// 获取组件el-form上的ref
const formRef = ref(null)
const defaultProps = reactive({
  children: "children",
  label: (menu) => {
    return menu.status !== 1 ? menu.title + "(已禁用)" : menu.title;
  },
  disabled: (menu) => {
    return menu.status !== 1;
  },
})

// 导出父组件需用到属性与方法
defineExpose({
  editId,menuTree,roleForm
})

// 接收tree组件ref
const formTree = ref(null)
// 重置表单
const resetForm = () => {
  // console.log(ctx,'组件实例')
  editId.value = ''
  menuTree.arr = []
  let form = unref(formRef)
  form.resetFields()
  roleForm.rolename = ''
  roleForm.menus = ''
  roleForm.status = 1
  // console.log(roleForm,'重置')
  // 清空菜单选项
  // ctx.refs.formTree.setCheckedKeys([])
  formTree.value.setCheckedKeys([])
  // 关闭对话框
  rolesStore.closeDialog()
}
// 提交表单
const submitForm = () => {
  // console.log(roleForm,'roleForm------')
  let form = unref(formRef)
  form.validate((valid) => {
    // 获取可以访问的菜单，将选择的数组转化成字符串
    roleForm.menus = formTree.value.getCheckedKeys().join(",")
    if (valid) {
      // console.log('submit!')
      if(editId.value) {
        // 编辑
        // console.log(editId,'编辑-----')
        rolesStore.editRoleAction({...roleForm,id: editId.value})
      } else {
        // console.log(roleForm,'新增----')
        rolesStore.addRoleAction(roleForm)
      }
      // 重置表单
      resetForm()
    } else {
      // console.log('error submit!')
      return false
    }
  })
}

const handleClose = (done) => {
  ElMessageBox.confirm('你确定要关闭吗？')
    .then(() => {
      done()
      // 重置表单
      resetForm()
    })
    .catch(() => {
      // catch error
    })
}
</script>

<template>
  <!-- 对话框 -->
  <el-dialog
    :title="editId ? '编辑角色' : '新增角色'"
    v-model="rolesStore.dialogVisible"
    width="50%"
    :before-close="handleClose"
  >
    <el-form
      :model="roleForm"
      :rules="rules"
      ref="formRef"
      label-width="100px"
    >
      <el-form-item label="角色名称" prop="rolename">
        <el-input
          v-model="roleForm.rolename"
          placeholder="请输入角色名称"
          auto-complete="off"
        />
      </el-form-item>
      <el-form-item label="访问权限">
        <el-tree
          ref="formTree"
          :data="menusStore.menuData.list"
          show-checkbox
          :default-checked-keys="menuTree.arr"
          node-key="id"
          :props="defaultProps"
        />
      </el-form-item>
      <el-form-item label="角色状态">
        <el-switch
          v-model="roleForm.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="2"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="submitForm">{{ editId? '编辑':'新增' }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>

</style>
